<template>
	<view ref="constainer" class="box" :style="height">
		<view class="top">
			<view class="LOGIN">English</view>
			<view class="img">
				<image src="@/static/LOGO.png"></image>
				<text>KOI云服务</text>
			</view>
			<form action="/" method="post" name="form">
				<view class="inputItem">
					<input v-model.lazy="mobile" id="username" autocomplete="on" type="text" class="uni-input" placeholder="" maxlength="26" name="username" onkeydown="" />
				</view>
				<view class="inputItem">
					<input v-model="password" id="password" class="uni-input" name="password" placeholder="" maxlength="16" :password="showPassword" />
					<uni-icons class="passIcon" :type="!showPassword ? 'eye-filled' : 'eye'" size="24" @click="changePassword" color="#D8D8D8"></uni-icons>
				</view>
				<view class="more">
					<text @click="SignIn('忘记密码')">忘记密码?</text>
				</view>
				<button type="submit" class="Submit" @click="onSubmit">
					登录
					<uni-icons class="subIcon" size="24" type="arrow-right"></uni-icons>
				</button>
			</form>
		</view>
		<view class="SignIn" @click="SignIn('注册')">
			未有账号？去
			<text>注册</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { debounce } from '@/utils/debounce';
import { Adaptive } from '@/utils/Adaptive';
import { postLoginAPI } from '@/api/login';
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
const showPassword = ref(true);
const store = useStore();
// 账号\手机号
const mobile = ref<string>('');
// 密码
const password = ref<string>('');
const result = ref();
//
const changePassword = () => {
	showPassword.value = !showPassword.value;
};
// 点击登录时的事件
const onSubmit = debounce(async () => {
	// 判断是否是电话号码注册还是邮箱注册
	if (mobile.value.length < 12) {
		store.state.sign.sourceType = 1;
		result.value = {
			mobile: mobile.value,
			type: store.state.sign.type,
			areacode: '+86',
			password: password.value,
			sourceType: store.state.sign.sourceType
		};
	} else {
		store.state.sign.sourceType = 2;
		result.value = {
			type: store.state.sign.type,
			email: mobile.value,
			password: password.value,
			sourceType: store.state.sign.sourceType
		};
	}
	//发送登入请求
	const res = await postLoginAPI(result.value);
	// 判断是否请求成功并且返回了token值
	try {
		if (res.data.access_token) {
			// 如果有值，就储存到本地存储
			uni.setStorage({
				key: 'token',
				data: res.data.access_token
			});
			// 并且跳转至首页
			await uni.switchTab({
				url: '/pages/index/index'
			});
		}
	} catch (e) {
		//TODO handle the exception
		console.error('没有token值，有可能是接口问题');
	}
}, 300);
const SignIn = (val: string) => {
	// 并且跳转至首页
	//  uni.switchTab({
	// 	url: '/pages/index/index'
	// })
	// var value = val==='signIn'? 'sing'
	uni.navigateTo({
		url: '/SignSubcontract/SignIn/index?type=' + val
	});
};
const constainer = ref(null);
const height = ref({ height: '100%' });
onMounted(async () => {
	const { boxHeight, windowHeight } = Adaptive(constainer.value);
	if (boxHeight > windowHeight) {
		height.value = { height: '100%' };
	} else {
		height.value = { height: '100vh' };
	}
});
</script>

<style lang="scss" scoped>
.LOGIN {
	font-size: 32px;
	padding-top: 62px;
	box-sizing: border-box;
	margin-left: 40px;
	color: white;
}

.img {
	margin-top: 285px;
	margin-bottom: 131px;
	width: 100%;
	height: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	image {
		width: 204px;
		height: 164px;
	}

	text {
		font-size: 44px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 62px;
		margin-top: 24px;
	}
}

.inputItem {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(57, 55, 89, 0.9);
	border-radius: 24px;
	opacity: 0.9;
	height: 120px;
	color: #ffffff;
	margin-bottom: 24px;

	.uni-input {
		text-align: center;
		height: 120px;
		width: 100%;
		font-size: 32px;
		line-height: 120px;
	}

	.passIcon {
		position: absolute;
		right: 40px;
		top: 0;
		height: 120px;
		line-height: 120px;
	}
}

.more {
	width: 100%;
	display: flex;
	justify-content: right;
	text-decoration: underline;
	align-items: center;
	color: red;
	margin-bottom: 40px;

	& > :nth-child(1) {
		font-size: 24px;
	}
}

.Submit {
	position: relative;
	width: 100%;
	height: 120px;
	background: linear-gradient(151deg, #06ffdd 0%, #4e47ff 100%);
	border-radius: 24px;
	font-size: 36px;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	color: #ffffff;
	line-height: 120px;

	.subIcon {
		position: absolute;
		right: 42px;
		top: 0;
		height: 120px;

		&::before {
			color: #ffffff;
		}
	}
}

.SignIn {
	display: block;
	font-size: 28px;
	color: white;
	text-align: center;
	padding-bottom: 94px;

	text {
		color: #0aa997;
	}
}

.box {
	width: 100vw;
	display: flex;
	padding: 0 40px;
	box-sizing: border-box;
	min-height: 100vh;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;

	.container {
		height: 100%;
		background-color: #121316;
	}
}
</style>
